function newShape(xStart, yStart, xStop, yStop,p){
	var kShape;
	
	p.xStart= xStart;
	p.yStart=yStart;
	p.xStop= xStop;
	p.yStop= yStop;
	
	switch(p.shape)
	{
		case 'line':
			kShape= makeLine(p.xStart,p.yStart,p.xStop,p.yStop,p.width,p.color,p.fill);
			//alert('LineTool');
			break;
		case 'rect':
			kShape= makeRectangle(p.xStart,p.yStart,p.xStop,p.yStop,p.width,p.color,p.fill);
			//alert('RectTool');
			break;
		case 'tria':
			kShape= makeTriangle(p.xStart,p.yStart,p.xStop,p.yStop,p.width,p.color,p.fill);
			//alert('TriaTool');
			break;
		case 'circ':
			kShape= makeCircle(p.xStart,p.yStart,p.xStop,p.yStop,p.width,p.color,p.fill);
			//alert('CircTool');
			break;
		case 'test':
			kShape= makeTest(p.xStart,p.yStart,p.xStop,p.yStop,p.width,p.color,p.fill);
			//alert('CircTool');
			break;	
		default:
		
			break;
	}
	var ret= {"shape":kShape, "info":p};	
	return ret;
	
}


/**
 * the idea was to initialize a shape and then pass it back to a global
 */
function initiateFreeShape(fromX, fromY, tool){ 
	var write = new Kinetic.Shape(function(){
        var context = this.getContext();
        context.beginPath();
        context.lineWidth = width;
        context.strokeStyle = color;
	    context.fillStyle = fill;
        context.lineCap = 'round';
  		context.moveTo(fromX, fromY); 
        
    });
    var ret= {"shape":write, "info":tool};	
    return ret;
  
}

/*
 * Then add to it again and pass it back on each on.mousemove
 */
function extendFreeShape(extX, extY, currShape){
	//var context = currShape.getContext();
	currShape.context.lineTo(extX, extY); //lineTo continues drawing the line (x,y coords of subsequent points)
  	currShape.context.stroke();
  	return currShape;
}


/*
 * and from on.mouseup() close it
 * 
 */
function closeFreeShape(currShape){
	//var context = currShape.getContext();
	currShape.context.closePath();
    currShape.context.fill();
    currShape.context.stroke();	
    return currShape;
}
function beginLine(fromX, fromY) //function to start drawing line for free-hand/pencil drawing
{
  context.lineWidth = lineWidth;
  context.strokeStyle = curColor;
  context.lineCap = 'round';
  context.beginPath();
  context.moveTo(fromX, fromY); //moveTo starts the line (x,y coords of the initial point)
}

function continueLine(toX, toY) //function to continue drawing line for free-hand/pencil drawing
{
  context.lineTo(toX, toY); //lineTo continues drawing the line (x,y coords of subsequent points)
  context.stroke();
}


/**
 * The rectangle shape
 * 
 * 
 */
function makeRectangle(x1, y1, x2, y2, width, color, fill){
	var rectangle = new Kinetic.Shape(function(){
        var context = this.getContext();
        context.beginPath();
        context.lineWidth = width;
        context.strokeStyle = color;
	    context.fillStyle = fill;
        context.moveTo(x1, y1);
        context.lineTo(x1,y2);
        context.lineTo(x2,y2);
        context.lineTo(x2,y1);
        context.closePath();
        context.fill();
        context.stroke();
    });
    return rectangle;
} 

/**
 *  The Triangle shape 
 * 
 * TODO: Sort of works but needs a better formula for locating the triangle
 */
function makeTriangle(x1, y1, x2, y2, width, color, fill){
	var triangle = new Kinetic.Shape(function(){
        var context = this.getContext()
        context.beginPath();
        context.lineWidth = width;
        context.strokeStyle = color;
	    context.fillStyle = fill;
        context.moveTo(x1, y1);
        context.lineTo(x1-(x2-x1) , y2);
        context.lineTo(x2, y2);
        context.closePath();
        context.fill();
        context.stroke();
    });
    return triangle;
} 

/**
 *  The Circle shape 
 * 
 * TODO: Does not seem to work.....
 */
function makeCircle(x1, y1, x2, y2, width, color, fill){
	var circle = new Kinetic.Shape(function(){
        var offset = x2-x1;
        //to handle negative movement on x and y
        if(offset < 0)
        	offset= offset * (-1);
        var canvas = this.getCanvas();
        var context = this.getContext();
        context.beginPath();
        context.strokeStyle = color;
		context.arc(x1, y1, offset, 0, Math.PI * 2, true);
  		//context.arc(x1, canvas.height / 2, 70, 0, Math.PI * 2, true);
        context.fillStyle = fill;
        context.fill();
        context.lineWidth = width;
        context.stroke();
    });
	return circle;
} 

/**
 *  The Straight line shape 
 * 
 * TODO: works like expected
 */
function makeLine(x1, y1, x2, y2, width, color, fill){
	var line = new Kinetic.Shape(function(){
        var context = this.getContext();
        context.beginPath();
        context.lineWidth = width;
        context.strokeStyle = color;
	    context.fillStyle = fill;
        context.moveTo(x1, y1)
        //context.lineTo(x1,y2);
        context.lineTo(x2,y2);
        //context.lineTo(x2,y1);
        context.closePath();
        context.fill();
        context.stroke();
    });
    return line;
}
function makeTest(x1, y1, x2, y2, width, color, fill){
	var triangle = new Kinetic.Shape(function(){
        var context = this.getContext();
        context.beginPath();
        context.lineWidth = 4;
        context.strokeStyle = color;
	    context.fillStyle = fill;
        context.moveTo(225, 150);
        context.lineTo(350, 180);
        context.lineTo(250, 270);
        context.closePath();
        context.fill();
        context.stroke();
    });
    return triangle;}
